<template>
  <li class="playlistitem" @click="navigateToPlayList(item.id)">
    <div class="thumb">
      <img :src="item.picUrl" alt="" />
      <span class="play-count">{{ item.playCount | formatPlayCount }}</span>
    </div>
    <h6>{{ item.name }}</h6>
  </li>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
    },
  },
  filters: {
    formatPlayCount: function (value) {
      return (value / 10000).toFixed(1) + "万";
    },
  },

  methods: {
    navigateToPlayList: function (id) {
      this.$router.push({
        path: "/Songlist",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style lang="less">
li.playlistitem {
  flex: 1 1 calc(100vw / 3 - 10px);
  &:nth-of-type(3n + 2) {
    margin-right: 5px;
    margin-left: 5px;
  }
  .thumb {
    position: relative;
    img {
      min-height: 30vw;
      vertical-align: middle;
    }
    .play-count {
      position: absolute;
      top: 0;
      right: 0;
      color: white;
      text-shadow: 0 0 1px black;
      font-size: 12px;
      &::before {
        content: "";
        background: no-repeat
          url("");
        background-position: left center;
        background-size: auto 100%;
        width: 1.2em;
        height: 0.9em;
        display: inline-block;
        // vertical-align: middle;
      }
    }
  }
  h6 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
    margin-bottom: 10px;
    font-size: 13px;
  }
}
</style>